<!-- Dom模板 -->
<template>
  <div>
    <!-- 企业列表 -->
    <div>
      <Fanhui :a="a" />
    </div>

    <div class="box">
      <h3>输入基本信息创建企业</h3>

      <div class="inputs">
        <!-- 企业名称 -->
        <p class="rer">
          企业名称 &#12288;&#12288;&#12288;&#12288;&#12288;
          <input
            type="text"
            class="inputss"
            placeholder="请填写企业名称"
            v-model="qymc"
          />
        </p>
        <!-- 联系人名 -->
        <p class="rer">
          联系人名 &#12288;&#12288;&#12288;&#12288;&#12288;
          <input
            type="text"
            class="inputss"
            placeholder="请输入联系人名"
            v-model="lxrm"
          />
        </p>
        <p class="rer">
          联系电话 &#12288;&#12288;&#12288;&#12288;&#12288;
          <input
            type="text"
            class="inputss"
            placeholder="请输入联系电话"
            v-model="lxfs"
          />
        </p>
      </div>

      <!-- 行业类型 -->
      <div class="inputs">
        <p class="rer">
          行业类型 &#12288;&#12288;&#12288;&#12288;&#12288;&#8194;
          <el-select
            v-model="value"
            clearable
            placeholder="请选择行业"
            class="my-el-selects"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </p>
      </div>

      <div class="inputs">
        <p class="rer">
          配送地址 &#12288;&#12288;&#12288;&#12288;&#12288;
          <input
            type="text"
            class="inputss"
            placeholder="请填写配餐详细地址"
            v-model="psdz"
          />
        </p>
      </div>

      <div>
        <el-button plain @click="clickds" class="test"> 完成创建 </el-button>
      </div>

      <p class="wxts">温馨提示:请填写完整的信息后进行匹配供餐餐厅,价格可谈</p>
      <p class="gly">
        <i class="el-icon-phone-outline"></i>&#8194;管理员:400-895-55222
      </p>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import Fanhui from "../utils/fanhui.vue"; // 引入组件
import * as api from "../../../api/index";

export default {
  name: "",
  components: {
    Fanhui,
  },
  data() {
    return {
      msg: "测试",
      a: "企业列表",
      options: [
        {
          value: "IT",
          // label: "IT",
        },
        {
          value: "政府机关",
          // label: "政府机关",
        },
        {
          value: "白领",
          // label: "白领",
        },
        {
          value: "演员",
          // label: "演员",
        },
        {
          value: "学生",
          // label: "学生",
        },
      ],
      value: "",
      qymc: "",
      lxrm: "",
      psdz: "",
      lxfs: "",
    };
  },
  computed: {},
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // Vue方法定义
  methods: {
    // 提交
    clickds() {
      let obj = {
        value: this.value,
        qymc: this.qymc,
        lxrm: this.lxrm,
        psdz: this.psdz,
        lxfs: this.lxfs,
      };
      console.log(obj);

// 判断输入信息是否为空
      if (this.value == "") {
        this.$message({
          title: "添加失败",
          message: "输入信息不能为空",
          type: "warning",
        });
      } else {
        api
          .toData(obj)
          .then((res) => {
            // 执行成功
            this.$notify({
              title: "添加成功",
              message: "企业信息添加成功",
              type: "success",
            });
            console.log(res);
            this.$router.replace({ path: '/meal' })
          })
          .catch((err) => {
            // 执行失败
            this.$message({
              title: "添加失败",
              message: "请联系客服",
              type: "warning",
            });
            console.log(err);
          });
      }
    },
  },
};
</script>

<style scoped>
.test[data-v-0a24c66a] {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  width: 315px;
  height: 40px;
  background: #2eadf9;
  color: #ffffff;
  margin: 20px 15px;
  text-align: center;
  line-height: 15px;
  border-radius: 4px;
  animation-name: animateLeft-data-v-0a24c66a;
}
.test {
  animation-duration: 2s;
  width: 315px;
  height: 40px;
  background: #2eadf9;
  color: #ffffff;
  margin: 20px 15px;
  text-align: center;
  line-height: 40px;
  border-radius: 4px;
  animation-name: animateLeft;
}

@keyframes animateLeft {
  0% {
    opacity: 0;
  }
}
.wxts {
  font-size: 10px;
  color: #ffb54f;
  text-align: center;
}
.gly {
  font-size: 10px;
  color: #887fd5;
  text-align: center;
  margin: 16px 0;
}
.wccj {
  text-align: center;
  widows: 121px;
  border: 1px solid red;
}

h3 {
  font-size: 18px;
  text-align: center;
  margin: 16px 0px;
}
.box {
  border: 1px solid #f7f7fc;
  height: 415px;
  width: 345px;
  margin: 30px 15px;
}
.inputs {
  margin: 4px;
  text-align: center;
}
.inputss {
  width: 121px;
  float: right;
  margin: 0 10px 0 0;
  border: 0;
  outline: none;
  font-size: 13px;
  text-align: right;
  /* color: #bb1f1f; */
}

.rer {
  font-size: 16px;
  padding: 17px 0px;
  width: 320px;
  box-shadow: 0px 1px rgba(121, 118, 118, 0.137);
  font-weight: 600;
  color: #777777;
}
.my-el-selects /deep/ .el-input .el-input__inner {
  border-color: #dcdfe6 !important;
  border: #dcdfe6 !important;
  text-align: right;
  /* float: right; */
}
.my-el-selects {
  width: 121px;
  font-size: 10px;
}
</style>